<template>
	<view class="img-view">
		<view class="img-row-save">
			<image id="imgArea" :src="picUrl" mode="widthFix"></image>
			<slot></slot>
		</view>
		<view class="img-save-btn-row" @click="saveImg">
			<view class="btn">
				<text>保存图片</text>
			</view>
		</view>
	</view>
</template>

<script>
	import html2canvas from "html2canvas";
	import downloader from '../../common/js/img-downloader.js';
	export default {
		data() {
			return {
				picUrl: 'https://wx.qlogo.cn/mmopen/vi_32/YTIr8z4omx1pNID1TFmE2eRktUsXMcIJm5D6HbLoRXpTlSticG0tibhFccJBLszdAe9uFbwGL6bJtBHWsBD6VPtQ/132'
			}
		},
		methods: {
			saveImg() {
				let name = (((1 + Math.random()) * 0x10000) | 0).toString(16).substring(1)
				let promise = downloader.load(this.picUrl, 'qssq' + name);
				promise.then(([error, res]) => {
					console.log(error, res);
				});
			},
			//导出
			createPicture() {
				html2canvas(document.image, {
					backgroundColor: null
				}).then(canvas => {
					var imgData = canvas.toDataURL("image/jpeg");
					this.fileDownload(imgData);
				});
			},
			//下载图片
			fileDownload(downloadUrl) {
				let aLink = document.createElement("a");
				aLink.style.display = "none";
				aLink.href = downloadUrl;
				aLink.download = "erere.png";
				// 触发点击-然后移除
				document.body.appendChild(aLink);
				aLink.click();
				document.body.removeChild(aLink);
			},
			test1() {
				// savePicCommon();
				let picUrl = 'https://bncf.oss-cn-shenzhen.aliyuncs.com/bncf/20190722/995a6f04137a4623b5e4caa47b963edb.jpg';
				const picname = '_downloads/erwe.jpg';
				if (window.plus) {
					plusReady();
				} else {
					document.addEventListener("plusready", plusReady, false);
				}
				/* if (!window.plus) {
					uni.showToast({
						icon: 'none',
						title: 'no support'
					});
					return;
				}
				plus.gallery.save(picUrl, function() {
					plus.nativeUI.alert("保存图片到相册成功");
				}, function() {
					plus.nativeUI.alert("保存失败");
				}); */
				/* let drask = plus.downloader.createDownload(picUrl, {}, function(d, status) {
					if (status == 200) {
						plus.gallery.save(picname, function() {
							uni.showToast({
								title: '保存成功'
							});
						}, function() {
							uni.showToast({
								icon: 'none',
								title: '保存失败，请重试'
							});
						});
					} else {
						uni.showToast({
							icon: 'none',
							title: 'down fail=' + status
						});
					}
				});
				drask.start(); */
				var imgDtask = plus.downloader.createDownload(picUrl, {
					method: 'GET',
					filename: '_downloads/test12FOHV54FS66.png'
				}, function(d, status) {
					if (status == 200) {
						console.log(JSON.stringify(d));
						plus.gallery.save(d.filename, function() { //保存到相册  
							plus.io.resolveLocalFileSystemURL(d.filename, function(enpty) {
								// 关闭弹框  
								mui.toast('保存成功');
							});

						})
					} else {
						mui.toast('保存失败');
					}
				});
				imgDtask.start();
			},
			downloadIamge(imgsrc, name) { //下载图片地址和图片名
				var image = new Image();
				// 解决跨域 Canvas 污染问题
				// image.setAttribute("crossOrigin", "anonymous");
				image.setAttribute("crossOrigin", "*");
				image.onload = function() {
					var canvas = document.createElement("canvas");
					canvas.width = image.width;
					canvas.height = image.height;
					var context = canvas.getContext("2d");
					context.drawImage(image, 0, 0, image.width, image.height);
					var url = canvas.toDataURL("image/png"); //得到图片的base64编码数据

					var a = document.createElement("a"); // 生成一个a元素
					var event = new MouseEvent("click"); // 创建一个单击事件
					a.download = name || "photo"; // 设置图片名称
					a.href = url; // 将生成的URL设置为a.href属性
					a.dispatchEvent(event); // 触发a的单击事件
				};
				image.src = imgsrc;
			},
			downs() {
				this.downloadIamge(this.picUrl, 'pic');
			},
			yulan() {
				var alink = document.createElement("a");
				alink.href = this.picUrl;
				alink.download = "pic"; //图片名
				alink.click();
				// this.downloadIamge(this.picUrl, 'pic')
			},
			save1() {
				const dom = document.querySelector('image');
				// 创建一个新的canvas
				const Canvas = document.createElement('canvas');
				const width = document.body.offsetWidth; // 可见屏幕的宽
				const height = document.body.offsetHeight; // 可见屏幕的高
				const scale = window.devicePixelRadio; // 设备的devicePixelRadio
				// 将Canvas画布放大scale倍，然后放在小的屏幕里，解决模糊问题
				Canvas.width = width * scale;
				Canvas.height = height * scale;
				Canvas.getContext('2d').scale(scale, scale);
				html2canvas(dom, {
					canvas: Canvas,
					scale,
					useCORS: true,
					logging: true,
					width: width + 'px',
					hegiht: height + 'px',
				}).then((canvas) => {
					const context = canvas.getContext('2d');
					// 关闭抗锯齿形
					context.mozImageSmoothingEnabled = false;
					context.webkitImageSmoothingEnabled = false;
					context.msImageSmoothingEnabled = false;
					context.imageSmoothingEnabled = false;
					// canvas转化为图片
					canvas2Image(canvas, canvas.width, canvas.height);
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	.img-view {
		width: 100%;
		height: 400px;
		max-width: 750px;

		.img-row-save {
			width: 100%;
			height: 100%;

			image {
				width: 100%;
				height: 100%;
			}
		}

		.img-save-btn-row {
			width: 100%;
			max-width: 750px;
			height: 80px;
			background-color: #4DB6FF;
			color: white;
			position: fixed;
			bottom: 0;
			display: flex;
			justify-content: center;
			align-items: center;
		}
	}
</style>
